<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>导出新机</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style>
        .table > tbody > tr > td {
            height: 35px;
            max-height: 44px;
            overflow: hidden;
        }

        .moduleName {
            float: left;
            height: 27px;
            line-height: 27px;
            font-size: 22px;
            width: 100px;
            text-align: center;
        }

        .tryStyle {
            width: 30px;
            height: 14px;
            line-height: 14px;
            font-size: 12px;
            /* top: 0; */
            right: 0;
            position: absolute;
            border-radius: 5px;
            margin-top: 1px;
            background: red;
            color: #fff;
            margin-right: -2px;
            transform: scale(0.8);
        }

        .nav-tabs-custom {
            margin-bottom: 0;
            box-shadow: none;
            position: relative;
        }

        span.lineOne {
            line-height: 28px;
            height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .table-detail td.twoLine {
            line-height: 1.5 !important;
            padding: 3px 0 !important;
        "
        }

        .table-detail select {
            text-indent: 0 !important;
            padding-left: 0 !important;
            margin-left: -4px !important;
        }

        .title {
            background-color: yellow;
            color: black;
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: normal;
        }

        .pull-left {
            margin-left: 2px;
        }

        .down {
            position: relative;
            top: 2px;
        }
    </style>
</head>
<body>
<section class="content" id="app">
    <iframe id="ifExprot" style="width:0px;height:0px;display: none;" frameborder="0"></iframe>
    <div class="div-td-content-more"><i></i></div>
    <div class="box-body no-padding iframeH2" style="overflow: auto;" id="scrollDiv">
        <div id="progress" class="wyui-progress"></div>
        <table id="logistics" class="table-detail">
            <tr class="no-print">
                   <td colspan="8" class=" no-print title">
                       <span class="pull-left"><input type="checkbox" class="down" id="checkbox" value="全选" v-model="checked" @change="changeAllChecked()">
                       <label for="checkbox">全选</label></span>
                       设备信息</td>
            </tr>
            <span>
		<!--选择的值为:{{checkedNames}}
		选择的值为:{{checkedOutNames}}-->
	</span>
            <tr>
                <td><span class="pull-left">
                    <input type="checkbox" class="down" id="购车公司" value="购车公司0" v-model="checkedNames" class="down">
                    <span for="购车公司">购车公司</span>
                </span>
                </td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="品牌" value="品牌1" v-model="checkedNames">
                    <label for="品牌">品牌</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="设备类型" value="设备类型2" v-model="checkedNames">
                    <label for="设备类型">设备类型</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="型号" value="型号3" v-model="checkedNames">
                    <label for="型号">型号</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="序列号" value="序列号4" v-model="checkedNames">
                    <label for="序列号">序列号</label></span></td>
                <td> <span class="pull-left"><input type="checkbox" class="down" id="吨位" value="吨位5" v-model="checkedNames">
                    <label for="吨位">吨位</label></span></td>
                <td>
                    <span class="pull-left"><input type="checkbox" class="down" id="配置号" value="配置号6" v-model="checkedNames">
                    <label for="配置号">配置号</label></span>
                </td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="铲斗类型" value="铲斗类型7" v-model="checkedNames">
                    <label for="铲斗类型">铲斗类型</label></span>
                </td>

            </tr>
            <tr>
                <td><span class="pull-left"><input type="checkbox" class="down" id="斗容" value="斗容8" v-model="checkedNames">
                    <label for="斗容">斗容</label></span>
                </td>
                <td>
                    <span class="pull-left"><input type="checkbox" class="down" id="生产日期" value="生产日期9" v-model="checkedNames">
                    <label for="生产日期">生产日期</label></span>
                </td>
                <td>
                    <span class="pull-left"><input type="checkbox" class="down" id="入库日期" value="入库日期11" v-model="checkedNames">
                    <label for="入库日期">入库日期</label></span>
                </td>
                <td>
                    <span class="pull-left"><input type="checkbox" class="down" id="在库时长" value="在库时长12" v-model="checkedNames">
                    <label for="在库时长">在库时长</label></span>
                </td>
                <td>
                    <span class="pull-left"><input type="checkbox" class="down" id="状态" value="状态13" v-model="checkedNames">
                    <label for="状态">状态</label></span>
                </td>
                <td>
                    <span class="pull-left"><input type="checkbox" class="down" id="库存地" value="库存地14" v-model="checkedNames">
                        <label for="库存地">库存地</label></span>
                </td>
                <td><span class="pull-left">
                    <input type="checkbox" class="down" id="实际交车日期" value="实际交车日期15" v-model="checkedNames">
                    <label for="实际交车日期">实际交车日期</label></span>
                </td>
                <td><span class="pull-left">
                    <input type="checkbox" class="down" id="是否可对客户融资" value="是否可对客户融资16" v-model="checkedNames">
                    <label for="是否可对客户融资">是否可对客户融资</label></span>
                </td>

            </tr>
            <tr>
                <td><span class="pull-left">
                    <input type="checkbox" class="down" id="提货日期" value="提货日期17" v-model="checkedNames">
                    <label for="提货日期">提货日期</label></span>
                </td>
                <td><span class="pull-left">
                    <input type="checkbox" class="down" id="提货价格" value="提货价格18" v-model="checkedNames">
                    <label for="提货价格">提货价格</label></span>
                </td>
                <td> <span class="pull-left"><input type="checkbox" class="down" id="合格证附件" value="合格证附件21" v-model="checkedNames">
                    <label for="合格证附件">合格证附件</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="付款方式" value="付款方式22" v-model="checkedNames">
                    <label for="付款方式">付款方式</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="免息期到期日" value="免息期到期日23" v-model="checkedNames">
                    <label for="免息期到期日">免息期到期日</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="是否已结清" value="是否已结清27" v-model="checkedNames">
                    <label for="是否已结清">是否已结清</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="出发地" value="出发地28" v-model="checkedNames">
                    <label for="出发地">出发地</label></span></td>
                <td> <span class="pull-left"><input type="checkbox" class="down" id="目的地" value="目的地29" v-model="checkedNames">
                    <label for="目的地">目的地</label></span></td>

            </tr>
            <tr>
                <td><span class="pull-left"><input type="checkbox" class="down" id="运输公司" value="运输公司30" v-model="checkedNames">
                    <label for="运输公司">运输公司</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="运输开始日期" value="运输开始日期31" v-model="checkedNames">
                    <label for="运输开始日期">运输开始日期</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="运输结束日期" value="运输结束日期32" v-model="checkedNames">
                    <label for="运输结束日期">运输结束日期</label></span></td>
                <td><span class="pull-left"> <input type="checkbox" class="down" id="运费" value="运费33" v-model="checkedNames">
                    <label for="运费">运费</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="扣款" value="扣款34" v-model="checkedNames">
                    <label for="扣款">扣款</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="扣款说明" value="扣款说明35" v-model="checkedNames">
                    <label for="扣款说明">扣款说明</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="板车车牌" value="板车车牌36" v-model="checkedNames">
                    <label for="板车车牌">板车车牌</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="司机姓名" value="司机姓名37" v-model="checkedNames">
                    <label for="司机姓名">司机姓名</label></span></td>

            </tr>
            <tr>
                <td><span class="pull-left"><input type="checkbox" class="down" id="司机电话" value="司机电话38" v-model="checkedNames">
                    <label for="司机电话">司机电话</label></span></td>
            </tr>
            <tr class="no-print">
                <td colspan="8" class=" no-print title">
                    <span class="pull-left"><input type="checkbox" class="down" value="全选" v-model="outChecked"
                                                   @change="changeOutAllChecked()">
                    <label for="checkbox">全选</label></span>出库信息
                </td>
            </tr>
            <tr>
                <td><span class="pull-left"><input type="checkbox" class="down" id="出库类型" value="出库类型39" v-model="checkedOutNames">
                    <label for="出库类型">出库类型</label></span></td>
                <td> <span class="pull-left"><input type="checkbox" class="down" id="销售合同" value="销售合同40" v-model="checkedOutNames">
                    <label for="销售合同">销售合同</label></span></td>
                <td><span class="pull-left"> <input type="checkbox" class="down" id="提车地址" value="提车地址41" v-model="checkedOutNames">
                    <label for="提车地址">提车地址</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="交车地址" value="交车地址42" v-model="checkedOutNames">
                    <label for="交车地址">交车地址</label></span></td>
                <td>
                    <span class="pull-left"><input type="checkbox" class="down" id="出库运输公司" value="出库运输公司43"
                                                   v-model="checkedOutNames">
                    <label for="出库运输公司">运输公司</label></span></td>
                <td>
                    <span class="pull-left"><input type="checkbox" class="down" id="出库运输开始日期" value="出库运输开始日期44"
                                                   v-model="checkedOutNames">
                    <label for="出库运输开始日期">运输开始日期</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="出库运输结束日期" value="出库运输结束日期45"
                                                   v-model="checkedOutNames">
                    <label for="出库运输结束日期">运输结束日期</label></span></td>
                <td><span class="pull-left"> <input type="checkbox" class="down" id="出库运费" value="出库运费46" v-model="checkedOutNames">
                    <label for="出库运费">运费</label></span></td>
            </tr>
            <tr>

                <td><span class="pull-left"><input type="checkbox" class="down" id="出库扣款" value="出库扣款47" v-model="checkedOutNames">
                    <label for="出库扣款">扣款</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="出库扣款说明" value="出库扣款说明48"
                                                   v-model="checkedOutNames">
                    <label for="出库扣款说明">扣款说明</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="出库板车车牌" value="出库板车车牌49"
                                                   v-model="checkedOutNames">
                    <label for="出库板车车牌">板车车牌</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="出库司机姓名" value="出库司机姓名50"
                                                   v-model="checkedOutNames">
                    <label for="出库司机姓名">司机姓名</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="出库司机电话" value="出库司机电话51"
                                                   v-model="checkedOutNames">
                    <label for="出库司机电话">司机电话</label></span></td>
                <td><span class="pull-left"><input type="checkbox" class="down" id="备注" value="备注52" v-model="checkedOutNames">
                    <label for="备注">备注</label></span></td>
            </tr>


            <!--<div id='example-3'>
                &lt;!&ndash;<span>Checked names: {{ checkedNames }}</span>&ndash;&gt;
            </div>-->
        </table>
        <div align="center">
            <input type="button" class="btn oaBtn  btn-sm" value="导出"
                   @click="exportExcel()" style="margin-top: 5px">
        </div>
    </div>

    </div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=558d0414"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/plugins/select2/select2.full.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne,.lineTwo", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + 12 + "px",
                        "left": $(this).offset().left - 6,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<!--<script type="text/javascript">
    //checkbox 全选/取消全选
    var isCheckAll = false;
    function swapCheck() {
        if (isCheckAll) {
            $("input[type='checkbox']").each(function() {
                this.checked = false;
            });
            isCheckAll = false;
        } else {
            $("input[type='checkbox']").each(function() {
                this.checked = true;
            });
            isCheckAll = true;
        }
    }
</script>-->

<script type="text/javascript">
    var api = frameElement.api, W = api.opener;
    function refresh() {
        $.wyui.page.getByPage();
    }
    var app = new Vue({
        el: '#app',
        data: {
            checked: false,
            outChecked: false,
            checkedNames: [],
            checkedOutNames: [],
            checkedAllNames: [],
            checkedOutArr: ["出库类型39", "销售合同40", "提车地址41", "交车地址42", "出库运输公司43", "出库运输开始日期44", "出库运输结束日期45", "出库运费46", "出库扣款47",
                "出库扣款说明48", "出库板车车牌49", "出库司机姓名50", "出库司机电话51", "备注52"],
            checkedArr: ["购车公司0", "品牌1", "设备类型2", "型号3", "序列号4", "吨位5","配置号6", "铲斗类型7","斗容8", "生产日期9", "入库日期11", "在库时长12", "状态13", "库存地14", "实际交车日期15"
                , "是否可对客户融资16", "提货日期17", "提货价格18", "随机附件19", "发票附件20", "合格证附件21", "付款方式22", "免息期到期日23", "是否已结清27", "出发地28"
                , "目的地29", "运输公司30", "运输开始日期31", "运输结束日期32", "运费33", "扣款34", "扣款说明35", "板车车牌36", "司机姓名37", "司机电话38"],
        },
        methods: {
            changeAllChecked: function () {
                if (this.checked) {
                    this.checkedNames = this.checkedArr
                } else {
                    this.checkedNames = []
                }
            },
            changeOutAllChecked: function () {
                if (this.outChecked) {
                    this.checkedOutNames = this.checkedOutArr
                } else {
                    this.checkedOutNames = []
                }
            },
            exportExcel: function () {
                var that = this;
                App.blockUI({
                    target: '#app',
                    boxed: true,
                    message: '文件下载中，请耐心等待......'//,
                    // animate: true
                });
                if (that.checkedNames != "") {
                    that.checkedAllNames = that.checkedNames + "," + that.checkedOutNames;
                } else {
                    that.checkedAllNames = that.checkedOutNames;
                }

                $('#ifExprot').attr('src', server.ip
                    + "/deviceSample/getDownByCondition.json?jsonData=" + that.checkedAllNames
                );
                /*debugger;
                $.wyui.postMethod('/deviceSample/getDownByCondition.json?jsonData='+that.checkedAllNames, function (data) {
                    alert("sdas");
                });*/
                setTimeout(function () {
                    App.unblockUI('#app');
                    api.close();
                }, 10000)
            },

        },
        watch: {
            "checkedNames": function () {
                if (this.checkedNames.length == this.checkedArr.length) {
                    this.checked = true
                } else {
                    this.checked = false
                }
            },
            "checkedOutNames": function () {
                if (this.checkedOutNames.length == this.checkedOutArr.length) {
                    this.outChecked = true
                } else {
                    this.outChecked = false
                }
            }
        },
        mounted: function () {

        }
    });
</script>
</body>
</html>